<template>
    <div id="coupon">
      <!--S用户信息-->
      <div class="user">
        <Avatar class="avatar" size="large" :src="data.user.avatar"></Avatar>
        <p class="nickname">{{data.user.nickname}}</p>
        <p class="uid">UID:{{data.uid}}</p>
      </div>
      <!--E用户信息-->
      <!--S卡券内容-->
      <div class="content">

        <!--S卡券封面-->
        <Avatar v-if="data.cover" class="cover" :src="data.cover" size="large" shape="square" />
        <!--E卡券封面-->

        <!--S卡券名字-->
        <p class="name" :style="{width: data.cover ? '':'100%'}" >{{data.name}}</p>
        <!--E卡券名字-->

        <!--S卡券类型-->
        <p class="type">类型：{{data.type_str}}<span>{{data.value}}</span></p>
        <!--E卡券类型-->

        <!--S卡券有效期-->
        <p class="time">有效期：{{data.time_str}}</p>
        <!--E卡券有效期-->

        <!--S核销地址-->
        <p class="address">核销地址：{{data.address}}</p>
        <!--E核销地址-->

        <!--S查看核销规则-->
        <ButtonGroup class="detail-btn">
          <Button type="info"  size="small" @click="detail_modal_show = true, detail = data.detail">点击查看核销规则</Button>
          <Button type="success" size="small" @click="$emit('change-status',{coupon_id: data.id, status: 1})">通过审核</Button>
          <Button type="warning" size="small" @click="$emit('change-status',{coupon_id: data.id, status: 3})">拒绝审核</Button>
          <Button type="error" size="small" @click="$emit('change-status',{coupon_id: data.id, status: 9})">删除</Button>
        </ButtonGroup>
        <!--E查看核销规则-->
      </div>
      <!--E卡券内容-->

      <!--S卡券核销规则弹窗-->
      <Modal v-model="detail_modal_show" :footer-hide="true" title="核销规则" :width="600">
        <div v-html="detail"></div>
      </Modal>
      <!--E卡券核销规则弹窗-->
    </div>
</template>

<script>
export default {
  name: 'coupon',
  data () {
    return {
      // 核销规则显示状态
      detail_modal_show: false,
      // 卡券核销规则
      detail: ''
    }
  },
  props: {
    data: {
      type: Object
    }
  }
}
</script>

<style lang="less" scoped>
  #coupon{
    position: relative;
    width: 400px;
    height: 225px;
    background: #FAC754;
    border-radius: 10px;
    cursor: pointer;
    float: left;
    margin: 0 15px 15px 0;
    .user{
      padding:0 5px;
      height: 50px;
      background: #fff;
      border-radius: 9px 9px 0 0;
      *{
        float: left;
        line-height: 50px;
        color: #000c17;
      }
      .avatar{
        margin-top: 5px;
      }
      .nickname{
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-left: 5px;
      }
      .uid{
        float: right;
      }
    }
    .content{
      padding:5px;
      box-sizing: border-box;
      .cover{
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 5px;
      }
      p{
        width: 100%;
        color: #fff;
        float: left;
        &.name{
          width: 335px;
        }
        &.type{
          width: 100%;
          margin: 5px 0 5px 0;
          span{
            float: right;
          }
        }
      }
      .detail-btn{
        position: absolute;
        right: 10px;
        bottom: 5px;
      }
    }
  }
</style>

<style>
  #coupon .content .cover img{
    object-fit:cover;
  }
</style>
